<template>
	<view class="content">
		<view class="helmet">
			<view class="devices">
				<view class="dev_snum">

				</view>
			</view>
			<view class="dev_state">
				<view class="state_tle">
					<view class="">
						扫码巡检
					</view>
					<view class="">
						快速扫码进行设备点检
					</view>
				</view>
				<view class="state_sao" @click="scanCode()">
					<image src="@/static/device/saoyisao.svg" mode=""></image>
					<view class="">
						扫一扫
					</view>
				</view>
			</view>

		</view>
		<!-- 主体部分 -->
		<view class="dev_tabs">
			<!-- 信息总览 -->
			<view class="dev_info_item dev_msg">
				<view class="device_con">
					<view class="device_state">
						<view class="state_logo">
							<view class="workshop">
								<image src="@/static/device/g-ningmeng.svg" mode=""></image>
								<view class="">
									垫江工厂第三车间
								</view>
							</view>
							<view class="shop_task">
								<view class="">
									当日任务
								</view>
								<view class="">
									24
								</view>
							</view>
							<view class="shop_task">
								<view class="">
									已完成
								</view>
								<view class="">
									11
								</view>
							</view>
						</view>
						<view class="device_img">
							<image src="@/static/device/shebei.png" mode=""></image>
						</view>
					</view>
					<view class="inspection">
						<view class="ins_icon icon_item">
							<view class="">
								<image src="@/static/device/renwu.svg" mode=""></image>巡检任务
							</view>
							<view class="">
							</view>
						</view>
						<view class="ins_pre">
							<view class="ins_tle">
								<view class="">
									<image src="@/static/device/w-jihua.svg" mode=""></image>冲压机巡检任务
								</view>
								<view class="">
									巡检任务
								</view>
							</view>
							<view class="pre_item">
								<view class="ins_begin">
									<view class="program">
										<text class="">计划开始</text>
										<text class="">2021-11-23 08:00:00</text>
									</view>
									<view class="tast_stu">
										<text class="">任务状态</text>
										<text class="pre_stu">进行中</text>
									</view>
								</view>
								<view class="pre_dus">
									<u-circle-progress :border-width="20" :width="140" active-color="#25C689" :percent="80">
										<view class="u-progress-content">
											<text class='u-progress-info'>80%</text>
										</view>
									</u-circle-progress>
								</view>
							</view>
							<view class="ins_col">
								<u-collapse :head-style="headStyle">
									<view class="item_list" v-for="(item, index) in itemList" :key="index">
										<u-collapse-item :title="item.head" :open="item.open">
											<view class="body_item">
												<timelineItem :leftShow="leftShow" leftTime='' color="#26ae61">
													<view class="facility">
														<view class="fac_tle">
															<view class="tle_o">
																<view class="">
																	高速冲压机01
																</view>
																<view class="">
																	已完成
																</view>
															</view>
															<view class="tle_n">
																2021-11-23 08:00:00 | 张绍刚
															</view>
															<view class="tle_e">
																<text>总项目：13</text>
																<text>已检项：13</text>
																<text>异常项：0</text>
															</view>
														</view>
														<view class="add_tips">
															<u-icon name="plus" color="#ffffff" size="45"></u-icon>
														</view>
													</view>
													<view class="spot_check">
														<view class="spot_tle">
															<view class="tle">点检项目</view>
															<view class="stu">
																<image src="@/static/device/zc-dian.svg" mode=""></image>正常
															</view>
														</view>
														<view class="spot_tlb h-table h-table-info">
															<view class="h-tr h-tr-2">
																<view class="h-td" style="color: #999;width: 30%;">油路检测</view>
																<view class="h-td" style="width: 20%;">正常</view>
																<view class="h-td" style="width: 50%;">
																	<text>2021-10-21 13:21:23 </text>
																	<u-icon name="checkmark-circle-fill" color="#27B66A" size="28"></u-icon>
																</view>
															</view>
															<view class="h-tr h-tr-2">
																<view class="h-td" style="color: #999;width: 30%;">管道检测</view>
																<view class="h-td" style="width: 20%;">正常</view>
																<view class="h-td" style="width: 50%;">
																	<text>2021-10-21 13:21:23 </text>
																	<u-icon name="checkmark-circle-fill" color="#27B66A" size="28"></u-icon>
																</view>
															</view>
															<view class="h-tr h-tr-2">
																<view class="h-td" style="color: #999;width: 30%;">气压检测</view>
																<view class="h-td" style="width: 20%;">正常</view>
																<view class="h-td" style="width: 50%;">
																	<text>2021-10-21 13:21:23 </text>
																	<u-icon name="checkmark-circle-fill" color="#27B66A" size="28"></u-icon>
																</view>
															</view>
															<view class="h-tr h-tr-2">
																<view class="h-td" style="color: #999;width: 30%;">气密性检测</view>
																<view class="h-td" style="width: 20%;">无漏气</view>
																<view class="h-td" style="width: 50%;">
																	<text>2021-10-21 13:21:23 </text>
																	<u-icon name="checkmark-circle-fill" color="#27B66A" size="28"></u-icon>
																</view>
															</view>
														</view>
													</view>
												</timelineItem>
												<timelineItem :leftShow="leftShow" leftTime='' color="#FFBA00">
													<view class="facility">
														<view class="fac_tle">
															<view class="tle_o">
																<view class="">
																	高速冲压机01
																</view>
																<view class="" style="background:#FFBA00;">
																	已完成
																</view>
															</view>
															<view class="tle_n">
																2021-11-23 08:00:00 | 张绍刚
															</view>
															<view class="tle_e">
																<text>总项目：13</text>
																<text>已检项：13</text>
																<text>异常项：0</text>
															</view>
														</view>
														<view class="add_tips">
															<u-icon name="plus" v-if="false" color="#ffffff" size="45"></u-icon>
														</view>
													</view>
													<view class="spot_check">
														<view class="spot_tle">
															<view class="tle">点检项目</view>
															<view class="stu">
																<image src="@/static/device/zc-dian.svg" mode=""></image>正常
															</view>
														</view>
														<view class="spot_tlb h-table h-table-info">
															<view class="h-tr h-tr-2">
																<view class="h-td" style="color: #999;width: 30%;">油路检测</view>
																<view class="h-td" style="width: 20%;">正常</view>
																<view class="h-td" style="width: 50%;">
																	<text>2021-10-21 13:21:23 </text>
																	<u-icon name="checkmark-circle-fill" color="#27B66A" size="28"></u-icon>
																</view>
															</view>
															<view class="h-tr h-tr-2">
																<view class="h-td" style="color: #999;width: 30%;">管道检测</view>
																<view class="h-td" style="width: 20%;">正常</view>
																<view class="h-td" style="width: 50%;">
																	<text>2021-10-21 13:21:23 </text>
																	<u-icon name="checkmark-circle-fill" color="#27B66A" size="28"></u-icon>
																</view>
															</view>
															<view class="h-tr h-tr-2">
																<view class="h-td" style="color: #999;width: 30%;">气压检测</view>
																<view class="h-td" style="width: 20%;">正常</view>
																<view class="h-td" style="width: 50%;">
																	<text>2021-10-21 13:21:23 </text>
																	<u-icon name="checkmark-circle-fill" color="#27B66A" size="28"></u-icon>
																</view>
															</view>
															<view class="h-tr h-tr-2">
																<view class="h-td" style="color: #999;width: 30%;">气密性检测</view>
																<view class="h-td" style="width: 20%;">无漏气</view>
																<view class="h-td" style="width: 50%;">
																	<text>2021-10-21 13:21:23 </text>
																	<u-icon name="checkmark-circle-fill" color="#27B66A" size="28"></u-icon>
																</view>
															</view>
														</view>
													</view>
												</timelineItem>

												<timelineItem :leftShow="leftShow" leftTime='' color="#26ae61">
												</timelineItem>
											</view>
										</u-collapse-item>
									</view>
								</u-collapse>
							</view>
						</view>
						<view class="ins_pre">
							<view class="ins_tle ins_exe">
								<view class="">
									<image src="@/static/device/w-jihua.svg" mode=""></image>冲压机巡检任务
								</view>
								<view class="">
									巡检任务
								</view>
							</view>
							<view class="pre_item">
								<view class="ins_begin">
									<view class="program">
										<text class="">计划开始</text>
										<text class="">2021-11-23 08:00:00</text>
									</view>
									<view class="tast_stu">
										<text class="">任务状态</text>
										<text class="pre_stu pre_exe">待执行</text>
									</view>
								</view>
								<view class="pre_dus">
									<u-circle-progress :border-width="20" :width="140" active-color="#25C689" :percent="80">
										<view class="u-progress-content">
											<text class='u-progress-info'>80%</text>
										</view>
									</u-circle-progress>
								</view>
							</view>
							<view class="ins_col">
								<u-collapse :head-style="headStyle">
									<view class="item_list" v-for="(item, index) in itemList" :key="index">
										<u-collapse-item :title="item.head" :open="item.open">
											<view class="body_item">
												<timelineItem :leftShow="leftShow" leftTime='' color="#26ae61">
													<view class="facility">
														<view class="fac_tle">
															<view class="tle_o">
																<view class="">
																	高速冲压机01
																</view>
																<view class="">
																	已完成
																</view>
															</view>
															<view class="tle_n">
																2021-11-23 08:00:00 | 张绍刚
															</view>
															<view class="tle_e">
																<text>总项目：13</text>
																<text>已检项：13</text>
																<text>异常项：0</text>
															</view>
														</view>
														<view class="add_tips">
															<u-icon name="plus" color="#ffffff" size="45"></u-icon>
														</view>
													</view>
													<view class="spot_check">
														<view class="spot_tle">
															<view class="tle">点检项目</view>
															<view class="stu">
																<image src="@/static/device/zc-dian.svg" mode=""></image>正常
															</view>
														</view>
														<view class="spot_tlb h-table h-table-info">
															<view class="h-tr h-tr-2">
																<view class="h-td" style="color: #999;width: 30%;">油路检测</view>
																<view class="h-td" style="width: 20%;">正常</view>
																<view class="h-td" style="width: 50%;">
																	<text>2021-10-21 13:21:23 </text>
																	<u-icon name="checkmark-circle-fill" color="#27B66A" size="28"></u-icon>
																</view>
															</view>
															<view class="h-tr h-tr-2">
																<view class="h-td" style="color: #999;width: 30%;">管道检测</view>
																<view class="h-td" style="width: 20%;">正常</view>
																<view class="h-td" style="width: 50%;">
																	<text>2021-10-21 13:21:23 </text>
																	<u-icon name="checkmark-circle-fill" color="#27B66A" size="28"></u-icon>
																</view>
															</view>
															<view class="h-tr h-tr-2">
																<view class="h-td" style="color: #999;width: 30%;">气压检测</view>
																<view class="h-td" style="width: 20%;">正常</view>
																<view class="h-td" style="width: 50%;">
																	<text>2021-10-21 13:21:23 </text>
																	<u-icon name="checkmark-circle-fill" color="#27B66A" size="28"></u-icon>
																</view>
															</view>
															<view class="h-tr h-tr-2">
																<view class="h-td" style="color: #999;width: 30%;">气密性检测</view>
																<view class="h-td" style="width: 20%;">无漏气</view>
																<view class="h-td" style="width: 50%;">
																	<text>2021-10-21 13:21:23 </text>
																	<u-icon name="checkmark-circle-fill" color="#27B66A" size="28"></u-icon>
																</view>
															</view>
														</view>
													</view>
												</timelineItem>
												<timelineItem :leftShow="leftShow" leftTime='' color="#FFBA00">
													<view class="facility">
														<view class="fac_tle">
															<view class="tle_o">
																<view class="">
																	高速冲压机01
																</view>
																<view class="" style="background:#FFBA00;">
																	已完成
																</view>
															</view>
															<view class="tle_n">
																2021-11-23 08:00:00 | 张绍刚
															</view>
															<view class="tle_e">
																<text>总项目：13</text>
																<text>已检项：13</text>
																<text>异常项：0</text>
															</view>
														</view>
														<view class="add_tips">
															<u-icon name="plus" v-if="false" color="#ffffff" size="45"></u-icon>
														</view>
													</view>
													<view class="spot_check">
														<view class="spot_tle">
															<view class="tle">点检项目</view>
															<view class="stu">
																<image src="@/static/device/zc-dian.svg" mode=""></image>正常
															</view>
														</view>
														<view class="spot_tlb h-table h-table-info">
															<view class="h-tr h-tr-2">
																<view class="h-td" style="color: #999;width: 30%;">油路检测</view>
																<view class="h-td" style="width: 20%;">正常</view>
																<view class="h-td" style="width: 50%;">
																	<text>2021-10-21 13:21:23 </text>
																	<u-icon name="checkmark-circle-fill" color="#27B66A" size="28"></u-icon>
																</view>
															</view>
															<view class="h-tr h-tr-2">
																<view class="h-td" style="color: #999;width: 30%;">管道检测</view>
																<view class="h-td" style="width: 20%;">正常</view>
																<view class="h-td" style="width: 50%;">
																	<text>2021-10-21 13:21:23 </text>
																	<u-icon name="checkmark-circle-fill" color="#27B66A" size="28"></u-icon>
																</view>
															</view>
															<view class="h-tr h-tr-2">
																<view class="h-td" style="color: #999;width: 30%;">气压检测</view>
																<view class="h-td" style="width: 20%;">正常</view>
																<view class="h-td" style="width: 50%;">
																	<text>2021-10-21 13:21:23 </text>
																	<u-icon name="checkmark-circle-fill" color="#27B66A" size="28"></u-icon>
																</view>
															</view>
															<view class="h-tr h-tr-2">
																<view class="h-td" style="color: #999;width: 30%;">气密性检测</view>
																<view class="h-td" style="width: 20%;">无漏气</view>
																<view class="h-td" style="width: 50%;">
																	<text>2021-10-21 13:21:23 </text>
																	<u-icon name="checkmark-circle-fill" color="#27B66A" size="28"></u-icon>
																</view>
															</view>
														</view>
													</view>
												</timelineItem>

												<timelineItem :leftShow="leftShow" leftTime='' color="#26ae61">
												</timelineItem>
											</view>
										</u-collapse-item>
									</view>
								</u-collapse>
							</view>
						</view>
						<view class="ins_pre">
							<view class="ins_tle ins_acc">
								<view class="">
									<image src="@/static/device/w-jihua.svg" mode=""></image>冲压机巡检任务
								</view>
								<view class="">
									巡检任务
								</view>
							</view>
							<view class="pre_item">
								<view class="ins_begin">
									<view class="program">
										<text class="">计划开始</text>
										<text class="">2021-11-23 08:00:00</text>
									</view>
									<view class="tast_stu">
										<text class="">任务状态</text>
										<text class="pre_stu pre_acc">已完成</text>
									</view>
								</view>
								<view class="pre_dus">
									<u-circle-progress :border-width="20" :width="140" active-color="#25C689" :percent="80">
										<view class="u-progress-content">
											<text class='u-progress-info'>80%</text>
										</view>
									</u-circle-progress>
								</view>
							</view>
							<view class="ins_col">
								<u-collapse :head-style="headStyle">
									<view class="item_list" v-for="(item, index) in itemList" :key="index">
										<u-collapse-item :title="item.head" :open="item.open">
											<view class="body_item">
												<timelineItem :leftShow="leftShow" leftTime='' color="#26ae61">
													<view class="facility">
														<view class="fac_tle">
															<view class="tle_o">
																<view class="">
																	高速冲压机01
																</view>
																<view class="">
																	已完成
																</view>
															</view>
															<view class="tle_n">
																2021-11-23 08:00:00 | 张绍刚
															</view>
															<view class="tle_e">
																<text>总项目：13</text>
																<text>已检项：13</text>
																<text>异常项：0</text>
															</view>
														</view>
														<view class="add_tips">
															<u-icon name="plus" color="#ffffff" size="45"></u-icon>
														</view>
													</view>
													<view class="spot_check">
														<view class="spot_tle">
															<view class="tle">点检项目</view>
															<view class="stu">
																<image src="@/static/device/zc-dian.svg" mode=""></image>正常
															</view>
														</view>
														<view class="spot_tlb h-table h-table-info">
															<view class="h-tr h-tr-2">
																<view class="h-td" style="color: #999;width: 30%;">油路检测</view>
																<view class="h-td" style="width: 20%;">正常</view>
																<view class="h-td" style="width: 50%;">
																	<text>2021-10-21 13:21:23 </text>
																	<u-icon name="checkmark-circle-fill" color="#27B66A" size="28"></u-icon>
																</view>
															</view>
															<view class="h-tr h-tr-2">
																<view class="h-td" style="color: #999;width: 30%;">管道检测</view>
																<view class="h-td" style="width: 20%;">正常</view>
																<view class="h-td" style="width: 50%;">
																	<text>2021-10-21 13:21:23 </text>
																	<u-icon name="checkmark-circle-fill" color="#27B66A" size="28"></u-icon>
																</view>
															</view>
															<view class="h-tr h-tr-2">
																<view class="h-td" style="color: #999;width: 30%;">气压检测</view>
																<view class="h-td" style="width: 20%;">正常</view>
																<view class="h-td" style="width: 50%;">
																	<text>2021-10-21 13:21:23 </text>
																	<u-icon name="checkmark-circle-fill" color="#27B66A" size="28"></u-icon>
																</view>
															</view>
															<view class="h-tr h-tr-2">
																<view class="h-td" style="color: #999;width: 30%;">气密性检测</view>
																<view class="h-td" style="width: 20%;">无漏气</view>
																<view class="h-td" style="width: 50%;">
																	<text>2021-10-21 13:21:23 </text>
																	<u-icon name="checkmark-circle-fill" color="#27B66A" size="28"></u-icon>
																</view>
															</view>
														</view>
													</view>
												</timelineItem>
												<timelineItem :leftShow="leftShow" leftTime='' color="#FFBA00">
													<view class="facility">
														<view class="fac_tle">
															<view class="tle_o">
																<view class="">
																	高速冲压机01
																</view>
																<view class="" style="background:#FFBA00;">
																	已完成
																</view>
															</view>
															<view class="tle_n">
																2021-11-23 08:00:00 | 张绍刚
															</view>
															<view class="tle_e">
																<text>总项目：13</text>
																<text>已检项：13</text>
																<text>异常项：0</text>
															</view>
														</view>
														<view class="add_tips">
															<u-icon name="plus" v-if="false" color="#ffffff" size="45"></u-icon>
														</view>
													</view>
													<view class="spot_check">
														<view class="spot_tle">
															<view class="tle">点检项目</view>
															<view class="stu">
																<image src="@/static/device/zc-dian.svg" mode=""></image>正常
															</view>
														</view>
														<view class="spot_tlb h-table h-table-info">
															<view class="h-tr h-tr-2">
																<view class="h-td" style="color: #999;width: 30%;">油路检测</view>
																<view class="h-td" style="width: 20%;">正常</view>
																<view class="h-td" style="width: 50%;">
																	<text>2021-10-21 13:21:23 </text>
																	<u-icon name="checkmark-circle-fill" color="#27B66A" size="28"></u-icon>
																</view>
															</view>
															<view class="h-tr h-tr-2">
																<view class="h-td" style="color: #999;width: 30%;">管道检测</view>
																<view class="h-td" style="width: 20%;">正常</view>
																<view class="h-td" style="width: 50%;">
																	<text>2021-10-21 13:21:23 </text>
																	<u-icon name="checkmark-circle-fill" color="#27B66A" size="28"></u-icon>
																</view>
															</view>
															<view class="h-tr h-tr-2">
																<view class="h-td" style="color: #999;width: 30%;">气压检测</view>
																<view class="h-td" style="width: 20%;">正常</view>
																<view class="h-td" style="width: 50%;">
																	<text>2021-10-21 13:21:23 </text>
																	<u-icon name="checkmark-circle-fill" color="#27B66A" size="28"></u-icon>
																</view>
															</view>
															<view class="h-tr h-tr-2">
																<view class="h-td" style="color: #999;width: 30%;">气密性检测</view>
																<view class="h-td" style="width: 20%;">无漏气</view>
																<view class="h-td" style="width: 50%;">
																	<text>2021-10-21 13:21:23 </text>
																	<u-icon name="checkmark-circle-fill" color="#27B66A" size="28"></u-icon>
																</view>
															</view>
														</view>
													</view>
												</timelineItem>

												<timelineItem :leftShow="leftShow" leftTime='' color="#26ae61">
												</timelineItem>
											</view>
										</u-collapse-item>
									</view>
								</u-collapse>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import timelineItem from '@/components/chenbin-timeline/timelineItem.vue'
	export default {
		components: {
			timelineItem
		},
		data() {
			return {
				leftShow: false,
				plantTitle: '注塑机',
				itemList: [{
					head: "巡检路线",
					body: "只要我们正确择取一个合适的参照物乃至稍降一格去看待他人，值得赏识的东西便会扑面而来",
					open: true,
					disabled: true
				}],
				headStyle: {
					marginTop: '30rpx',
					color: '#101010',
					fontSize: '28rpx',
					padding: '30rpx 30rpx 30rpx 40rpx',
					background: 'url(../../../static/device/gwxunjianguiji.svg) no-repeat',
					backgroundSize: '26rpx 26rpx',
					backgroundPositionY: '30rpx',
					backgroundPositionX: '0rpx',

				}
			};
		},
		mounted() {},
		methods: {
			scanCode() {
			                 // 允许从相机和相册扫码
			                 uni.scanCode({
			                     success: function (res) {
			                         console.log('条码类型：' + res.scanType);
			                         console.log('条码内容：' + res.result);
			                     }
			                 });
			            }
		}
	}
</script>

<style lang="scss" scoped>
	@mixin maxIconSize {
		width: 74rpx;
		height: 74rpx;
	}

	@mixin minIconSize {
		width: 40rpx;
		height: 40rpx;
	}

	.icon_item {
		color: #777777;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;
		justify-content: space-between;
		padding-right: 104rpx;

		image {
			@include minIconSize;
			margin-right: 20rpx;
		}

		view {
			display: flex;
			align-items: center;
		}

		view:nth-child(2) {
			image {
				width: 24rpx;
				height: 24rpx;
				margin-right: 8rpx;
			}
		}
	}

	/deep/ .u-navbar {
		background: $maincolor !important;
		color: #FFFFFF !important;
	}

	/deep/ .u-back-wrap {

		padding: 0 10rpx 0 0 !important;
	}

	.content {
		background: #fafafa;
		position: relative;

		.helmet {
			position: fixed;
			width: 100%;
			z-index: 9;
			background: #fff;

			.devices {
				position: relative;
				z-index: 1;
				background-color: $bodyColor;
				box-sizing: border-box;
				padding: 0 44rpx;

				.dev_snum {
					padding: 44rpx 0 86rpx 0;
					font-size: 24rpx;
					color: #FFFFFF;
				}

			}

			.dev_state {
				position: relative;
				z-index: 9;
				margin: -66rpx 44rpx 44rpx 44rpx;
				@include box_shadow;
				border-radius: 24rpx;
				background: #ffffff;
				padding: 30rpx 40rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.state_tle {
					display: flex;
					flex-direction: column;

					view:nth-child(1) {
						font-size: 28rpx;
						color: #101010;
						margin-bottom: 6rpx;
					}

					view:nth-child(2) {
						font-size: 24rpx;
						color: #888888;
					}
				}

				.state_sao {
					display: flex;
					background-color: $bodyColor;
					padding: 16rpx 40rpx;
					color: #fff;
					font-size: 32rpx;
					box-sizing: border-box;
					border-radius: 40rpx;

					image {
						width: 48rpx;
						height: 48rpx;
						margin-right: 16rpx;
					}
				}
			}


		}

		.dev_tabs {
			padding: 100rpx 0 0 0;
			position: relative;
			// overflow-y: scroll;
			overflow: hidden;

			.device_con {
				overflow-y: scroll;
			}

			.dev_info_item {
				display: flex;
				flex-direction: column;
				padding-top: 112rpx;
			}

			.dev_msg {
				.device_state {
					@include box_shadow;

					@include box_radius(8rpx) margin: 0 20rpx 20rpx 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 24rpx 12rpx;
					background: #FFFFFF;

					.state_logo {
						display: flex;
						flex-direction: column;

						.workshop {
							margin-bottom: 24rpx;
							color: #006AFF;
							display: flex;
							align-items: center;
							font-size: 24rpx;

							image {
								@include minIconSize;
								margin-right: 20rpx;
							}

							view {
								padding: 5rpx 38rpx;
								background: rgba($color: #3388FF, $alpha: 0.16);
							}
						}

						.shop_task {
							display: flex;
							justify-content: space-between;
							align-items: center;
							margin-bottom: 24rpx;
							padding-left: 60rpx;
							font-size: 32rpx;
							clear: #737373;

							view:nth-child(2) {
								color: #FF3B00;
							}
						}
					}

					.device_img {
						image {
							width: 240rpx;
							height: 220rpx;
						}
					}
				}

				.inspection {
					padding: 24rpx;
					background: #FFFFFF;
					display: flex;
					flex-direction: column;

					.ins_pre {
						@include box_shadow;
						display: flex;
						align-items: center;
						flex-direction: column;
						justify-content: space-between;
						font-size: 26rpx;
						margin-bottom: 30rpx;
						border-radius: 16rpx;

						.ins_tle {
							width: 100%;
							color: #FFFFFF;
							background: #7AC756;
							font-size: 28rpx;
							padding: 20rpx 32rpx;
							border-radius: 8px 8px 0px 0px;
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-bottom: 30rpx;

							image {
								@include minIconSize;
								margin-right: 20rpx;
							}

							view {
								display: flex;
								align-items: center;
							}

							view:nth-child(2) {
								image {
									width: 24rpx;
									height: 24rpx;
									margin-right: 8rpx;
								}
							}
						}

						.ins_exe {
							background: #85888E;
						}

						.ins_acc {
							background: #0CCB82;
						}

						.pre_item {
							width: 100%;
							display: flex;
							align-items: center;
							justify-content: space-between;
							padding: 0 26rpx;
							box-sizing: border-box;

							.ins_begin {
								display: flex;
								flex-direction: column;

								view {
									text:nth-child(1) {
										font-size: 28rpx;
										color: #1C222A;
										padding-right: 32rpx;
									}
								}
							}

							.program,
							.tast_stu {
								margin-bottom: 30rpx;
							}

							.pre_stu {
								color: #7AC756;
								padding: 3rpx 20rpx;
								background: rgba($color: #EEF8E8, $alpha: 1.0);
								border: 1rpx solid #7AC756;
								font-size: 24rpx;
							}

							.pre_exe {
								color: #85888E;
								background: rgba($color: #F2F2F3, $alpha: 1.0);
								border: 1rpx solid #85888E;
							}

							.pre_acc {
								color: #0CCB82;
								background: rgba($color: #26AE61, $alpha: 0.3);
								border: 1rpx solid #0CCB82;
							}

							.pre_bra {
								color: #00C0DE;
							}
						}

						.ins_col {
							width: 100%;
							box-sizing: border-box;
							padding: 0 26rpx;

							.item_list {
								.body_item {
									margin-top: 15rpx;

									.facility {
										display: flex;
										justify-content: space-between;
										align-items: center;
										border-bottom: 2rpx solid #EFEFF4;

										.add_tips {
											text-align: center;
											padding: 45rpx;
											border-radius: 50%;
											background: $bodyColor;
										}

										.fac_tle {
											.tle_o {
												display: flex;
												margin-bottom: 16rpx;

												view:nth-child(1) {
													font-size: 28rpx;
													color: #101010;
													margin-right: 32rpx;
												}

												view:nth-child(2) {
													font-size: 24rpx;
													background: #26AE61;
													border-radius: 4rpx;
													padding: 0 4rpx;
													color: #FFFFFF;
												}
											}

											.tle_n,
											.tle_e {
												color: #3D4655;
												font-size: 24rpx;
												margin-bottom: 20rpx;
											}

											.tle_e {
												text {
													margin-right: 20rpx;
													margin-bottom: 30rpx;
												}
											}
										}
									}

									.spot_check {
										display: flex;
										flex-direction: column;
										margin-top: 20rpx;

										.spot_tle {
											display: flex;
											justify-content: space-between;
											align-items: center;

											view:nth-child(1) {
												font-size: 28rpx;
												color: #101010;
												margin-right: 32rpx;
											}

											view:nth-child(2) {
												display: flex;
												align-items: center;
												font-size: 24rpx;
												color: #999;

												image {
													width: 26rpx;
													height: 26rpx;
													margin-right: 10rpx;
												}
											}
										}

										.spot_tlb {
											text {
												margin-right: 10rpx;
											}
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
</style>
